<template>
<!-- 问题 观点 用户名 可见性 内容 评论数 点赞数 热度 状态 -->
  <div class="course-user-page">
    <div class="head">全部回答</div>
    <div class="select-button">
      <el-row>
        <el-col :span="17">
          <el-row :gutter="10">
            <el-col :span="6">
              <el-input v-model="inputNickname" placeholder="请输入用户姓名关键词" @change="pageAnswers" ></el-input>
            </el-col>
            <el-col :span="6">
              <el-input v-model="inputKeyword" placeholder="请输入观点关键词"  @change="pageAnswers"></el-input>
            </el-col>
            <el-col :span="6">
              <el-input v-model="inputContent" placeholder="请输入内容" @change="pageAnswers" ></el-input>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="3" :offset="1">
          <el-button type="primary" plain @click="pageAnswers()" >筛选回答</el-button>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" plain @click="clear()" >清空</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="student-list" style="display: flex;flex-direction: column;align-items: center">
      <el-table :data="tableData" border style="width: 100%">
        <!--        <el-table-column type="selection" width="55">-->
        <!--        </el-table-column>-->
        <el-table-column fixed prop="id" label="回答ID" min-width="50%" align="center">
        </el-table-column>
        <el-table-column prop="nickname" label="用户昵称" min-width="40%" align="center" >
        </el-table-column>
        <el-table-column prop="visibility" label="可见性" min-width="60%" align="center" >
        </el-table-column>
        <el-table-column prop="pointKey" label="观点关键词" min-width="70%" align="center" >
        </el-table-column>
        <el-table-column prop="content" label="回答内容" min-width="80%" align="center" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            {{scope.row.content.replace(/<[^>]+>/g,"")}}
          </template>
        </el-table-column>
        <el-table-column prop="commentNumber" label="评论" min-width="30%" align="center" >
        </el-table-column>
        <el-table-column prop="goodNumber" label="点赞" min-width="30%" align="center" >
        </el-table-column>
        <el-table-column prop="heat" label="观点热度" min-width="50%" align="center" >
        </el-table-column>
        <el-table-column prop="gmtCreate" label="创建时间" min-width="50%" align="center" >
        </el-table-column>
        <el-table-column prop="gmtModified" label="更新时间" min-width="50%" align="center" >
        </el-table-column>

        <el-table-column label="操作" align="center" fixed="right" width="80">
          <template slot-scope="scope">
            <el-button @click="showOperationModel(scope.row.id,scope.$index)" type="text" size="medium">回答修改</el-button>
            <el-button @click="showVisibilityModel(scope.row.id,scope.$index)" type="text" size="medium">可视权限</el-button>
          </template>

        </el-table-column>
      </el-table>

      <div class="block" style="margin-top: 20px">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[8, 10, 20, 40]"
            :page-size="8"
            layout="total, sizes, prev, pager, next, jumper"
            :total="parseInt(total)">
        </el-pagination>
      </div>
    </div>



    <el-dialog title="操作" show-close :visible.sync="visibilityVisible">
      <el-form label-width="120px">
        <el-form-item label="可视权限">
          <el-select v-model="visibilityType" filterable style="min-width: 450px">
            <el-option
                v-for="(item,index) in visibilityTypes"
                :key="item"
                :label="item"
                :value="index">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="visibilityVisible = false">取 消</el-button>
        <el-button type="primary" @click="upgrade">确 定</el-button>
      </div>
    </el-dialog>



    <el-dialog title="操作" show-close :visible.sync="answerBindDialogVisible">
      <el-form label-width="120px">
        <el-form-item label="回答内容">
          <WangEditor :intro-html="currentAnswerInfo.content" @setIntroduction="setIntroduction"/>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="answerBindDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="update">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import WangEditor from "@/components/WangEditor.vue";
export default {
  name: "StudentManageView",
  components : {WangEditor},
  data() {
    return {
      total: 0,
      currentSize: 8,
      currentPage: 1,
      visibilityType : 0,

      inputNickname:"",
      inputKeyword:'',
      inputContent:'',
      visibilityTypes:["仅自己可见","仅关注可见","全部可见"],
      inputUpdateKeyword:"",

      answerBindDialogVisible: false,
      visibilityVisible : false,
      currentAnswerId: "",
      currentAnswerInfo: {
        id: null,
        content:"",

        description:'',
        visibility:""
      },

      answerId : "",
      auditId : "",
      questionId: "",


      departmentTree: null,
      loading: false,
      debounceClock: null,

      tableData: [],
    };
  },
  mounted() {
    this.questionId = this.$route.params.id
    this.answerId = this.$route.query.linkId
    this.auditId = this.$route.query.auditId
    this.pageAnswers();
  },
  methods: {
    pageAnswers() {
      this.$api.pageAnswers({
        pageSize: this.currentSize,
        pageNow: this.currentPage,
        nickname: this.inputNickname || '',
        keyword: this.inputKeyword || '',
        content:this.inputContent || "",
        id: this.answerId,
        questionId : this.questionId
      })
          .then((res) => {
            let list = res.data.rows;
            console.log(list)
            this.total = res.data.totalPage
            this.tableData = list
            for (let i = 0; i < list.length; i++) {
              list[i].gmtCreate = this.gmtToDate(list[i].gmtCreate)
              list[i].gmtModified = this.gmtToDate(list[i].gmtModified)
              if(list[i].visibility==0){
                list[i].visibility = "仅自己可见"
              }
              if(list[i].visibility==1){
                list[i].visibility = "仅关注可见"
              }
              if(list[i].visibility==2){
                list[i].visibility = "全部可见"
              }
            }
          });
    },
    handleSizeChange(val) {
      this.currentSize = parseInt(val);
      this.pageAnswers();
    },
    handleCurrentChange(val) {
      this.currentPage = parseInt(val);
      this.pageAnswers();
    },

    showOperationModel(answerId,index) {
      this.currentAnswerId = answerId
      this.currentAnswerInfo = this.tableData[index]
      this.answerBindDialogVisible = true
    },
    showVisibilityModel(currentPointId,index) {
      this.currentAnswerId = currentPointId
      this.visibilityVisible = true
      this.visibilityType = this.tableData[index].visibility
    },


    update() {
      console.log(this.currentAnswerInfo)
      this.$api.answerUpdata(this.currentAnswerInfo).then(res => {
        this.answerBindDialogVisible = false
        console.log(res)
        this.pageAnswers()
      })
    },

    upgrade() {
      this.$api.upgrade({
        auditId: this.auditId,
        linkId : this.currentAnswerId,
        visibility: this.visibilityType,
        type : 2,// 对于后端AuditContentTypeEnum枚举值
      }).then(res => {
        console.log(res)
        this.visibilityVisible = false
        this.pageAnswers()
      })
    },
    clear(){
      this.inputNickname = ''
      this.inputKeyword = ''
      this.inputContent = ''
      this.pageAnswers()
    },
    setIntroduction: function (html) {
      this.currentAnswerInfo.content = html;//在父组件修改值
    },


    gmtToDate(gmt) {
      let da = new Date(gmt);
      let year = da.getFullYear();
      let month = da.getMonth() + 1;
      let date = da.getDate();
      let hours = da.getHours();
      let minutes = da.getMinutes();
      let seconds = da.getSeconds();
      return [year, month, date].join("-") + " " + [hours, minutes, seconds].join(':');
    }
  },
  watch: {

  }
};
</script>

<style scoped>
.course-user-page{
  margin-top: 20px;
  width: 100%;
}


.head {
  padding-bottom: 10px;
}

.select-button {
  padding: 10px 0;
}

.student-list {
  width: 100%;
  padding: 10px 0;
  display: flex;
}
</style>
